<template>
	<div>
		<h1>异步组件</h1>
		<p>在大型项目中，我们可能需要将应用切分成更小的块</p>
		<button @click="change">切换组件</button>
		<keep-alive>
			<component :is="dynamicCom"></component>
		</keep-alive>
	</div>

</template>

<script>
	// import {
	// 	defineAsyncComponent
	// } from 'vue'
	import Demo1 from './components/demo1'
	// import Demo2 from './components/demo2'
	// const Demo2 = defineAsyncComponent(() => {
	// 	import('./components/demo2')
	// }) vue3引入defineAsyncComponent来定义异步组件

	export default {
		components: {
			Demo1,
			Demo2:()=>import('./components/demo2')//vue2异步组件写法
		},
		data() {
			return {
				dynamicCom: 'Demo1' //注意值一定是字符串
			}
		},
		methods: {
			change() {
				this.dynamicCom = (this.dynamicCom == 'Demo1' ? 'Demo2' : 'Demo1')
			}

		},
		// beforeCreate() {
		// 	console.log("Index beforeCreate");
		// },
		// created() {
		// 	console.log("Index created");
		// },
		// beforeMount() {
		// 	console.log("Index beforeMount");
		// },
		// mounted() {
		// 	console.log("Index mounted");
		// },
		// beforeUpdate() {
		// 	console.log("Index beforeUpdate");
		// },
		// updated() {
		// 	console.log("Index updated");
		// },
		// beforeDestroy() {
		// 	console.log("Index beforeDestroy");
		// },
		// destroyed() {
		// 	console.log("Index destroyed");
		// },
	}
</script>

<style scoped>
</style>